<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>插入地图</title>
<script type="text/javascript"
	src="http://api.map.baidu.com/api?v=1.1&services=true"></script>
<script type="text/javascript">
var iframe = window.frameElement, parentWindow = window.parent;
var editor = iframe.editor;
</script>
<style type="text/css">
* {
	color: #838383
}

body {
	font-size: 12px;
	width: 540px;
	height: 350px;
	overflow: hidden;
	margin: 0px;
	padding: 0px;
}

.content {
	padding: 9px 0px 0px 15px;
	height: 100%;
}

.content table {
	padding: 0px;
	margin: 0px;
	width: 100%
}

.content table tr {
	padding: 0px;
	margin: 0px;
	list-style: none;
	height: 30px;
	line-height: 30px;
}

#city,#address {
	height: 21px;
	background: #FFF;
	border: 1px solid #d7d7d7;
	padding: 0px;
	margin: 0px;
	line-height: 21px;
}

#city {
	width: 90px
}

#address {
	width: 220px
}

a.doSearch {
	display: block;
	text-align: center;
	line-height: 24px;
	text-decoration: none;
	height: 24px;
	width: 95px;
	border: 0px;
	margin: 0px;
	padding: 0px;
	background: url(htmleditor-icons-all.gif) no-repeat;
}

a.doSearch:hover {
	background-position: 0 -30px;
}
</style>

</head>
<body>

	<div class="content">

		<table>

			<tr>
				<td>城市:</td>
				<td><input id="city" type="text" value="北京市" />
				</td>
				<td>地址:</td>
				<td><input id="address" type="text" value="" />
				</td>
				<td><a href="javascript:doSearch()" class="doSearch">搜索</a>
				</td>
			</tr>

		</table>


		<div style="width: 520px; height: 340px; border: 1px solid gray"
			id="container"></div>

	</div>
	<script type="text/javascript">
		var map = new BMap.Map("container"), marker, point, imgcss;
		map.enableScrollWheelZoom();
		map.enableContinuousZoom();

		function doSearch() {
			if (!document.getElementById('city').value) {
				alert('请输入城市!');
				return;
			}
			var search = new BMap.LocalSearch(
					document.getElementById('city').value, {
						onSearchComplete : function(results) {
							if (results && results.getNumPois()) {
								var points = [];
								for ( var i = 0; i < results
										.getCurrentNumPois(); i++) {
									points.push(results.getPoi(i).point);
								}
								if (points.length > 1) {
									map.setViewport(points);
								} else {
									map.centerAndZoom(points[0], 13);
								}
								point = map.getCenter();
								marker.setPoint(point);
							} else {
								alert('无法定位到该地址！');
							}
						}
					});
			search.search(document.getElementById('address').value
					|| document.getElementById('city').value);
		}
		//获得参数
		function getPars(str, par) {
			var reg = new RegExp(par + "=((\\d+|[.,])*)", "g");
			return reg.exec(str)[1];
		}
		function init() {
			var img = editor.selection.getRange().getClosedNode();
			if (img && /api[.]map[.]baidu[.]com/ig.test(img.getAttribute("src"))) {
				var url = img.getAttribute("src"), centers;
				centers = getPars(url, "center").split(",");
				point = new BMap.Point(Number(centers[0]), Number(centers[1]));
				map.addControl(new BMap.NavigationControl());
				map.centerAndZoom(point, Number(getPars(url, "zoom")));
				imgcss = img.style.cssText;
			} else {
				point = new BMap.Point(116.404, 39.915); // 创建点坐标
				map.addControl(new BMap.NavigationControl());
				map.centerAndZoom(point, 10); // 初始化地图,设置中心点坐标和地图级别。
			}
			marker = new BMap.Marker(point);
			marker.enableDragging();
			map.addOverlay(marker);
		}
		init();
		document.getElementById('address').onkeydown = function(evt) {
			evt = evt || event;
			if (evt.keyCode == 13) {
				doSearch();
			}
		};
		var dialog_onok = function() {
			var center = map.getCenter();
			var zoom = map.zoomLevel;
			var size = map.getSize();
			var point = marker.getPoint();
			var url = "http://api.map.baidu.com/staticimage?center="
					+ center.lng + ',' + center.lat + "&zoom=" + zoom
					+ "&width=" + size.width + '&height=' + size.height
					+ "&markers=" + point.lng + ',' + point.lat;
			editor.execCommand(
							'inserthtml',
							'<img width="'+ size.width +'"height="'+ size.height +'" src="' + url + '" style="' + imgcss + '"/>');
		};
		document.getElementById("address").focus();
	</script>

</body>
</html>
